<template>
  <div>
    <e-search
      v-if="searchShow"
      :form-options="searchFormOptions"
      :form-data-current="searchDataCurrent"
      :form-label-width="searchLabelWidth"
      :refresh-show="searchRefreshShow"
      :more-show="searchMoreShow"
      :openable="openBtnShow"
      @on-search="handleSearch"
      @on-refresh="handleRefresh"
      @on-search-more="handleSearchMore"
      @change-height="handleOpen"
    />
    <div v-if="operationShow" class="flex flex-justify-between">
      <div class="flex-1">
        <slot name="left"></slot>
      </div>
      <e-operation :btns="btns" v-bind="$attrs" />
    </div>
  </div>
</template>

<script>
import eSearch from '@/components/e-search'
import eOperation from '@/components/e-operation'
export default {
  name: 'EControl',
  components: {
    eSearch,
    eOperation
  },
  props: {
    // 查询表单配置
    searchFormOptions: {
      type: Array,
      default() {
        return []
      }
    },
    // 查询表单数据
    searchDataCurrent: {
      type: Object,
      default() {
        return {}
      }
    },
    // 查询表单label宽度
    searchLabelWidth: {
      type: String,
      default: '80px'
    },
    // 查询区是否展示重置按钮
    searchRefreshShow: {
      type: Boolean,
      default: true
    },
    // 查询区是否展示高级搜索按钮
    searchMoreShow: {
      type: Boolean,
      default: false
    },
    // 查询区是否展示展开钮
    openBtnShow: {
      type: Boolean,
      default: true
    },
    // 操作区按钮配置
    btns: {
      type: Array,
      default() {
        return []
      }
    },
    // 搜索区是否显示
    searchShow: {
      type: Boolean,
      default: true
    },
    // 操作区是否显示
    operationShow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {}
  },
  computed: {},
  watch: {
    searchDataCurrent: {
      handler(value) {
        this.handleSearch(value)
      }
      // immediate: true
    }
  },
  created() {},
  mounted() {},
  methods: {
    /**
     * @functionName handleSearch
     * @param {Object} data 查询表单数据
     * @description 点击查询按钮
     */
    handleSearch(data) {
      this.$emit('on-search', data)
    },
    /**
     * @functionName handleRefresh
     * @param {Object} data 查询表单数据
     * @description 点击重置按钮
     */
    handleRefresh(data) {
      this.$emit('on-refresh', data)
    },
    /**
     * @functionName handleSearchMore
     * @description 点击高级查询按钮
     */
    handleSearchMore() {
      this.$emit('on-search-more')
    },
    /**
     * @functionName handleOpen
     * @param {Number} height 查询表单的高度
     * @description 点击展开/关闭按钮
     */
    handleOpen(height) {
      this.$emit('change-height', height + (this.operationShow ? 50 : 0))
    }
  }
}
</script>
<style lang="scss" scoped></style>
